<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {

        }

        .main_center {
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }


        /*悬停*/

        .el-header {
            background-color: white;
            line-height: 72px;
        }

        a:hover {
            color: #ff5c68;

        }

        .color_hover > a:hover {
            color: #FFFFFF;
            background-color: #ED0B75
        }

        .color_hover > a {
            font-family: "Arial Black";
            color: black;
        }

        header a {
            margin: 10px;
            text-decoration: none;
            font-size: 16px;
            color: black;
        }

        .input-search {
            width: 200px;
            height: 51px;
            /*position: absolute;*/
            /*left: 0;*/
            /*top: 0;*/
            font-size: 14px;
            background-color: transparent;
            outline: 0;
            -webkit-appearance: none;
            padding: 0 10px 0 54px;
            border-top-left-radius: 46px;
            border-bottom-left-radius: 46px;
            border: 1px solid #f8f8f8;
            /*background-color: #f8f8f8;*/
            border-right-color: #FF1268;
            box-sizing: content-box;
        }

        .button-search {
            width: 82px;
            height: 100%;
            /*position: absolute;*/
            right: 0;
            top: 0;
            background: #FF1268;
            line-height: 46px;
            font-size: 16px;
            text-align: center;
            color: #FFF;
            border-radius: 0 27px 27px 0;

            letter-spacing: 4px;
            cursor: pointer;
        }

        .footer_links {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 36px 0;
            text-align: center;
            zoom: 1;
        }

        li, ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer_links_list {
            float: left;
            font-size: 13px;
            margin-left: 10px;
            margin-right: 10px;
            color: #111;
        }

        footer a {
            text-decoration: none;
            color: black;
        }

        .footer_r_1 {
            zoom: 1;
            padding-bottom: 10px;
        }

        .footer_r_1_a {
            float: left;
            display: block;
            width: 98px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            background-color: #ff1268;
            color: #fff;
            font-size: 14px;
            border-radius: 20px;
        }

        .footer_r_words {
            padding-bottom: 6px;
        }

        .footer_r_words_word {
            float: left;
            font-size: 13px;
            color: #111;

        }

        .footer_r_words_line {
            float: left;
            padding: 0 15px;
        }

        .center {
            width: 1550px;
            margin: 0 auto

        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-container>
            <!--头-->
            <el-header height="72px" style="border: 1px solid #f4f4f4">
                <div class="center">
                    <el-row gutter="20">
                        <el-col span="2">
                            <img src="imgs/首页log.jpg"
                                 style="width: 92px ;height:41px ;margin-top: 20px ;float: left">
                        </el-col>
                        <el-col span="10">
                            <a href="Index.html">首页</a>
                            <a href="">分类</a>
                        </el-col>
                        <el-col span="8">
                            <input class="input-search" placeholder="搜索明星、演出" style="background-color: #f8f8f8">
                            <button class="button-search" style="padding: 0">搜索</button>
                        </el-col>
                        <el-col span="2" style="margin-bottom: 20px;position: relative;right: 120px;bottom: 15px">
                            <el-popover placement="top-start" trigger="hover">
                                <div slot="reference">
                                    <i style="font-size: 30px;position:relative;right: 30px;top: 40px"
                                       class="el-icon-user">
                                        <p style="font-size: 15px;position: relative;left: 30px;bottom: 35px">
                                            登录
                                        </p>
                                    </i>
                                </div>
                                <a>个人信息</a><br>
                                <hr>
                                <a>账号设置</a><br>
                                <hr>
                                <a>订单管理</a><br>
                                <hr>
                                <a>退出登录</a><br>
                            </el-popover>
                        </el-col>
                        <el-col span="2" style="margin-bottom: 20px;position: relative;right: 200px">
                            <el-popover placement="top-start" trigger="hover">
                                <div slot="reference">
                                    <i style="font-size: 35px; position:relative;top: 10px"
                                       class="el-icon-mobile"></i>
                                    <p style="font-size: 15px;position: relative;left: 35px;bottom: 80px">
                                        下载
                                    </p>
                                </div>
                                <img src="imgs/二维码.jpg" width="100" height="100">
                            </el-popover>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <!--身体-->
            <div style="width: auto;margin: 0 auto">
                <el-main class="main_center">
                    <el-row style="margin-top: 30px;height: 2300px;background-size: cover;background-position: center;padding-left: 20px">
                        <el-col span="18" style="position: relative;right: 25px">
                            <el-card style="width: 880px;height: 2200px;float: left;box-shadow: none">
                                <div>
                                    <span style="font-size: 10px">
                                        共有<span style="color: #e51b46">7261</span>个商品
                                    </span>

                                    <el-card style="margin: auto;box-shadow: none">
                                        <div>
                                            <el-row>
                                                <el-col span="4">
                                                    城市:
                                                </el-col>
                                                <el-col span="20">
                                                    <el-container>
                                                        <el-header class="color_hover"
                                                                   style="position: relative; bottom: 25px">
                                                            当前选中城市：
                                                            <a href="" style="text-decoration: none">北京</a>
                                                            <el-button style="position: relative">更多</el-button>
                                                        </el-header>
                                                        <el-main>
                                                            <el-row>
                                                                <el-col class="color_hover" span="2">
                                                                    <a href="" style="text-decoration: none">全部</a>
                                                                </el-col>
                                                                <el-col class="color_hover" span="22">
                                                                    <a href="" v-for="c in cityArr"
                                                                       style="position: relative;text-decoration: none">
                                                                        <span style="padding: 15px">{{c}}</span>
                                                                    </a>
                                                                    <br>
                                                                </el-col>
                                                            </el-row>

                                                        </el-main>
                                                    </el-container>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <el-divider></el-divider>
                                        <div>
                                            <el-row>
                                                <el-col span="4">
                                                    分类:
                                                </el-col>
                                                <el-col span="20">
                                                    <el-main>
                                                        <el-row>
                                                            <el-col class="color_hover" span="2">
                                                                <a href="" style="text-decoration: none">全部</a>
                                                            </el-col>
                                                            <el-col class="color_hover" span="22">
                                                                <a href="" v-for="c in clfArr"
                                                                   style="position: relative;text-decoration: none">
                                                                    <span style="padding: 20px;">{{c}}</span>
                                                                </a>
                                                                <br>
                                                            </el-col>
                                                        </el-row>
                                                    </el-main>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <el-divider></el-divider>

                                        <div>
                                            <el-row>
                                                <el-col span="4">
                                                    时间:
                                                </el-col>
                                                <el-col span="20">
                                                    <el-main>
                                                        <el-row>
                                                            <el-col class="color_hover" span="2">
                                                                <a href="" style="text-decoration: none">全部</a>
                                                            </el-col>
                                                            <el-col span="22">
                                                                <div class="block" style="position: relative">
                                                                    <span class="demonstration"></span>
                                                                    <el-date-picker
                                                                            v-model="value2"
                                                                            align="right"
                                                                            type="date"
                                                                            placeholder="选择日期"
                                                                            :picker-options="pickerOptions">
                                                                    </el-date-picker>
                                                                </div>
                                                            </el-col>
                                                        </el-row>
                                                    </el-main>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-card>
                                </div>

                                <div style="margin: 20px auto">
                                    <el-tabs type="border-card" style="box-shadow: none">
                                        <el-tab-pane label="相关度排序">
                                            <el-row gutter="10" v-for="item in indexArr1">
                                                <el-card style="box-shadow: none">
                                                    <el-col span="12">
                                                        <img :src="item.imgUrl" width="110px" height="164px">
                                                    </el-col>
                                                    <el-col span="12">
                                                        <a style="font-size: 14px">{{item.text1}}</a><br>
                                                        <a style="color: #9ba7c3 ;font-size: 12px">{{item.text2}}</a><br>
                                                        <a style="color: #9ba7c3 ;font-size: 12px;">{{item.Time}}</a><br><br>
                                                        <a style="color: #ff1268 ;font-size: 14px">{{item.Price}}</a>
                                                    </el-col>
                                                </el-card>
                                                <el-divider></el-divider>
                                            </el-row>
                                            <div style="text-align: center;margin-bottom: 20px">
                                                <el-button>点击查看更多演出</el-button>
                                            </div>
                                        </el-tab-pane>

                                        <el-tab-pane label="推荐排序">
                                            <el-row gutter="10" v-for="item in indexArr2">
                                                <el-col span="12">
                                                    <img :src="item.imgUrl" width="110px" height="164px">
                                                </el-col>
                                                <el-col span="12">
                                                    <a style="font-size: 14px">{{item.text1}}</a><br>
                                                    <a style="color: #9ba7c3 ;font-size: 12px">{{item.text2}}</a><br>
                                                    <a style="color: #9ba7c3 ;font-size: 12px;">{{item.Time}}</a><br><br>
                                                    <a style="color: #ff1268 ;font-size: 14px">{{item.Price}}</a>
                                                </el-col>
                                            </el-row>
                                            <div style="text-align: center;margin-bottom: 20px">
                                                <el-button>点击查看更多演出</el-button>
                                            </div>
                                        </el-tab-pane>

                                        <el-tab-pane label="最近开场">
                                            <el-row gutter="10" v-for="item in indexArr3">
                                                <el-col span="12">
                                                    <img :src="item.imgUrl" width="110px" height="164px">
                                                </el-col>
                                                <el-col span="12">
                                                    <a style="font-size: 14px">{{item.text1}}</a><br>
                                                    <a style="color: #9ba7c3 ;font-size: 12px">{{item.text2}}</a><br>
                                                    <a style="color: #9ba7c3 ;font-size: 12px;">{{item.Time}}</a><br><br>
                                                    <a style="color: #ff1268 ;font-size: 14px">{{item.Price}}</a>
                                                </el-col>
                                            </el-row>
                                            <div style="text-align: center;margin-bottom: 20px">
                                                <el-button>点击查看更多演出</el-button>
                                            </div>
                                        </el-tab-pane>
                                        <el-tab-pane label="最新上架">
                                            <el-row gutter="10" v-for="item in indexArr4">
                                                <el-col span="12">
                                                    <img :src="item.imgUrl" width="110px" height="164px">
                                                </el-col>
                                                <el-col span="12">
                                                    <a style="font-size: 14px">{{item.text1}}</a><br>
                                                    <a style="color: #9ba7c3 ;font-size: 12px">{{item.text2}}</a><br>
                                                    <a style="color: #9ba7c3 ;font-size: 12px;">{{item.Time}}</a><br><br>
                                                    <a style="color: #ff1268 ;font-size: 14px">{{item.Price}}</a>
                                                </el-col>
                                            </el-row>
                                            <div style="text-align: center;margin-bottom: 20px">
                                                <el-button>点击查看更多演出</el-button>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col span="6">
                            <el-card
                                    style="width: 320px;height: 1000px;position: relative;right: 12px;background-color: white;box-shadow: none">

                                <span>
                                    <h3 style="font-size: 15px;line-height: 28px; margin-bottom: 24px;">
                                        您可能还喜欢
                                    </h3>
                                </span>
                                <div>
                                    <img src="imgs/太原周杰伦.jpg" width="120p" height="160">
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px">
                                        【太原】 周杰伦2023嘉年华世<br>界巡回演唱会 太原站</p>
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px;color: #ff3183">
                                        艺人：周杰伦</p>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-location-outline">
                                        太原 | 山西体育中心体育场</p><br>
                                    <p style="position: relative;left: 130px;bottom: 200px;font-size: 12px;color: #999999"
                                       class="el-icon-date">
                                        2023.09.21-09.24</p>
                                    <p style="position: relative;left: 140px;bottom: 200px;font-size: 16px;color: #ff3183">
                                        500-2000 元</p>
                                </div>

                                <div style="position: relative;bottom: 150px">
                                    <img src="imgs/五月天.jpg" width="120p" height="160">
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px">
                                        【深圳】 五月天2023「好好好<br>想见到你」深圳演唱会</p>
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px;color: #ff3183">
                                        艺人：五月天</p>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-location-outline">
                                        深圳 | 深圳大运中心体育场</p><br>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-date">
                                        2023.07.08-07.09</p>
                                    <p style="position: relative;left: 140px;bottom: 200px;font-size: 16px;color: #ff3183">
                                        355-1355 元</p>
                                </div>

                                <div style="position: relative;bottom: 300px">
                                    <img src="imgs/合肥薛之谦.jpg" width="120p" height="160">
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px">
                                        【合肥】 薛之谦“天外来物”</br>巡回演唱会-合肥站</p>
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px;color: #ff3183">
                                        艺人：薛之谦</p>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-location-outline">
                                        合肥 | 合肥体育中心体育场</p><br>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-date">
                                        2023.07.21-07.23</p>
                                    <p style="position: relative;left: 140px;bottom: 200px;font-size: 16px;color: #ff3183">
                                        317-1717 元</p>
                                </div>

                                <div style="position: relative;bottom: 450px">
                                    <img src="imgs/北京黄家驹.jpg" width="120p" height="160">
                                    <p style="position: relative;left: 130px;bottom: 180px;font-size: 12px">
                                        【北京】 『大演时代』2023永</br>恆樂隊•紀念黃家駒30载致敬</br>
                                        BEYOND全國巡迴演唱會</p>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-location-outline">
                                        北京 | 华侨城大剧院(北京)</p><br>
                                    <p style="position: relative;left: 130px;bottom: 190px;font-size: 12px;color: #999999"
                                       class="el-icon-date">
                                        2023.08.05 周六 19:30</p>
                                    <p style="position: relative;left: 140px;bottom: 190px;font-size: 16px;color: #ff3183">
                                        90-580 元</p>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-main>
            </div>


            <!--脚-->
            <el-footer style="background-color: #f8f8f8;height: 280px; margin:0 auto;width: 100%;">
                <div class="center" style="color: #666;width: 1200px">
                    <div style="height: 80px;line-height:15px;margin: 0 ">
                        <ul class="footer_links">
                            <li class="footer_links_list"><a href="">帮助中心</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">公司介绍</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">品牌识别</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">公司大事记</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">协议及隐私政策</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">廉政举报</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">联系合作</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">招聘信息</a></li>
                            <li class="footer_links_list">|</li>
                            <li class="footer_links_list"><a href="">防骗秘籍</a></li>

                        </ul>
                    </div>
                    <div style="height: 172px;margin: 10px ">
                        <el-row gutter="20">
                            <el-col span="8">
                                <img src="imgs/首页log.jpg" style="width:167px;height: 60px ;margin:15px">
                                <img src="imgs/二维码.jpg" style="width:87px;height: 87px;margin-right:30px">
                            </el-col>
                            <el-col span="16">
                                <div class="footer_r_1">
                                    <a href="" class="footer_r_1_a">在线客服</a>
                                </div>
                                <br>
                                <ul class="footer_r_words">
                                    <li class="footer_r_words_word">
                                        <a href="">京ICP证031057号</a>
                                    </li>
                                    <li class="footer_r_words_line">|</li>
                                    <li class="footer_r_words_word">
                                        <a href="">京ICP备11043884号</a>
                                    </li>
                                    <li class="footer_r_words_line">|</li>
                                    <li class="footer_r_words_word">
                                        <a href="">京公网安备11010502037341号</a>
                                    </li>
                                    <li class="footer_r_words_line">|</li>
                                    <li class="footer_r_words_word">
                                        <a href="">广播电视节目制作经营许可证(京)字第02253号</a>
                                    </li>
                                    <br>
                                    <li class="footer_r_words_word">
                                        <a href="">网络文化经营许可证 京网文[2023]1649-054号</a>
                                    </li>
                                    <li class="footer_r_words_line">|</li>
                                    <li class="footer_r_words_word">
                                        <a href="">营业性演出许可证京市演587号</a>
                                    </li>
                                    <br>
                                    <li class="footer_r_words_word">
                                        北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights
                                        Reserved
                                    </li>
                                    <br>
                                    <li class="footer_r_words_word">
                                        举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号
                                    </li>
                                    <br>
                                    <li class="footer_r_words_word">
                                        违法不良信息举报电话：020-62108294
                                    </li>
                                </ul>
                                <br>
                                <img src="imgs/首页电子执照.jpg " style="width: 100px;height: 30px ;float:left">
                                <img src="imgs/首页pci.jpg" style="width: 57px;height:30px ;float:left">
                                <img src="imgs/首页log1.jpg" style="width: 45px;height: 30px ;float:left">
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                indexArr1: [
                    {
                        "imgUrl": "imgs/演唱会1.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    },
                    {
                        "imgUrl": "imgs/演唱会2.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    },
                    {
                        "imgUrl": "imgs/演唱会3.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    },
                    {
                        "imgUrl": "imgs/演唱会4.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    },
                    {
                        "imgUrl": "imgs/演唱会5.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    },
                    {
                        "imgUrl": "imgs/演唱会6.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    }
                ],
                indexArr2: [
                    {
                        "imgUrl": "imgs/演唱会6.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    }
                ],
                indexArr3: [
                    {
                        "imgUrl": "imgs/演唱会5.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    }
                ],
                indexArr4: [
                    {
                        "imgUrl": "imgs/演唱会4.png",
                        "text1": "ONER 2023 【无限未来:Future X】青春",
                        "text2": "异空间 OLYHOUSE",
                        "Time": "2023.07.15 周六 19:30",
                        "Price": "¥480起"
                    }
                ],
                cityArr: [
                    "北京", "上海", "广州", "深圳", "合肥", "芜湖", "南京", "新疆", "宁波", "阜阳", "淮南", "广东", "香港"
                ],
                clfArr: [
                    "演唱会", "音乐会", "话剧歌剧", "其他"
                ],
                pickerOptions: {

                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '明天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周后',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',

            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            }
        }
    })
</script>
</html>